<template>
    <!--绑定better-scoll滚动 -->
    <div class="ratings" ref="ratings">
      <div class="ratings-content">
        <!--评价内容介绍 -->
        <div class="overview">
          <div class="overview-left">
            <div class="score">{{seller.score}}</div>
            <div class="title">综合评分</div>
            <div class="rank">高于周边商家{{seller.rankRate}}%</div>
          </div>
          <div class="overview-right">
            <div class="score-wrapper">
              <span class="title">服务态度</span>
              <star :size="36" :score="seller.serviceScore"></star>
              <span class="score">{{seller.serviceScore}}</span>
            </div>
            <div class="score-wrapper">
              <span class="title">商品评价</span>
              <star :size="36" :score="seller.foodScore"></star>
              <span class="score">{{seller.foodScore}}</span>
            </div>
            <div class="delivery-wrapper">
              <span class="title">送达时间</span>
              <span class="delivery">{{seller.deliveryTime}}分钟</span>
            </div>
          </div>
        </div>
        <!--区域块 -->
        <split></split>
        <!-- 全部，满意，不满意组件 ratings通过列表数据统计全部数量 满意数量 不满意数量 -->
        <ratingselect  @selectType = "selectRatings" @onlyContent = "toggleContent" :ratings="ratings" :showFlag ="showFlag" :selectType = "selectType" :onlyContent="onlyContent"></ratingselect>
        <!--评价列表 -->
        <div class="rating-wrapper">
          <ul v-show="ratings.length">
            <li v-show="needShow(rating.rateType,rating.text)" v-for="(rating,index) in ratings" :key="index" class="rating-item border-1px">
              <div class="avatar"><img :src="rating.avatar" width="28" height="28"/></div>
              <div class="rating-content">
                <div class="name">{{rating.username}}</div>
                <div class="star-wrapper">
                  <star :size="24" :score="rating.score"></star>
                  <span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
                </div>
                <p class="text">{{rating.text}}</p>
                <div class="recommend">
                  <span class="icon-thumb_up"></span>
                  <span v-for="(item,index) in rating.recommend" :key="index" class="item">{{item}}</span>
                </div>
                <div class="time">{{rating.rateTime | formatDate}}</div>
              </div>
            </li>
          </ul>
          <!--暂无评价内容 -->
          <div class="no-ratings" v-show="!ratings || !ratings.length">暂无点赞内容</div>
        </div>
      </div> 
    </div>
</template>
<script>
import BScroll from 'better-scroll';
import star from '../../components/base/star/star.vue';
import split from '../base/split/split.vue';
import ratingselect from '../base/ratingselect/ratingselect.vue';
import $http from '../../utils/http.js';
import api from '../../api/app.js';
import {formatDate} from '../../utils/formdate.js';

//商品评价
const ALL = 2;

export default {
  props: {
    seller: { //通过router-view路由跳转传递
      type: Object
    }
  },
  components: {
    star,
    split,
    ratingselect
  },
  data() {
    return {
     ratings:[],//列表数据
     showFlag: false,
     selectType: ALL,
     onlyContent: true
    };
  },
  created() {
    //初始化加载
    this.ratingsList();
  },
  filters: {
      //时间字符串转换
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date,'yyyy-MM-dd hh:mm'); //调用公共方法formateDate();
    }
  },
  methods: {
    ratingsList: async function() {
       const res = await $http.post(api.ratings);
       console.log(res.data);
       this.ratings = res.data;
       //渲染dom
       this.$nextTick(() => {
         console.log('ratings子组件添加better-scroll滚动');
         this.scroll = new BScroll(this.$refs.ratings,{
           click:true //开启触发点击
         });
       })
    },
    selectRatings(type) {
      this.selectType = type;
      console.log('触发ratings方法将子组件更新同步到父组件也更新');
      this.$nextTick(() =>{
        this.scroll.refresh();
      });
    },
    toggleContent() {
      this.onlyContent = !this.onlyContent;
      this.$nextTick(() =>{
        this.scroll.refresh();
      });
    },
    //关联全部，满意，不满意切换
    needShow(type,text){
      if(this.onlyContent && !text){
        return false;
      }
      if(this.selectType === ALL){ //全部是2，单独判断
        return true;
      }else {
        return this.selectType === type;
      }
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss">
@import "../../assets/style/mixin.scss";
.ratings {
  position: absolute;
  top:174px;
  left: 0;
  bottom: 0;//需要设置 ?
  width: 100%;
  overflow: hidden;//过长需要隐藏，使用better-scroll进行滚动
  .overview {
    display: flex;//自适应布局
    padding: 18px 0;
    .overview-left {
      flex: 0 0 137px;
      padding: 6px 0; //整天上下padding
      width: 137px;
      text-align: center;//居中
      border-right: 1px solid rgba(7,17,27,0.2);
      @media only screen and (max-width: 320px) { //兼容iphone5
        flex: 0 0 120px;
        width: 120px;
      }
      .score {
        line-height: 28px;
        margin-bottom: 6px;
        font-size: 24px;
        color: rgb(255, 153, 0);
      }
      .title {
        margin-bottom: 8px;
        line-height: 12px;
        font-size: 12px;
        color: rgb(7, 17, 27);
      }
      .rank {
        line-height: 10px;
        font-size: 10px;
        color: rgb(147, 153, 159);
      }
    }
    .overview-right {
      flex: 1;
      padding: 6px 0 6px 24px;
      @media only screen and (max-width: 320px) {
        padding-left: 6px;
      }
      .score-wrapper {
        margin-bottom: 8px;
        .title {
          vertical-align: top;
          line-height: 18px;
          font-size: 12px;
          color: rgb(7, 17, 27);
        }
        .star {
          display: inline-block;
          vertical-align: top;
          margin: 0 6px;
        }
        .score {
          vertical-align: top;
          line-height: 18px;
          font-size: 12px;
          color: rgb(255, 153, 0);
        }
      }
      .delivery-wrapper {
        font-size: 0;//去掉占位符
        .title {
          line-height: 18px;
          font-size: 12px;
          color: rgb(7, 17, 27);
        }
        .delivery {
          margin-left: 6px;
          font-size: 12px;
          color: rgb(147, 153, 159);
        }
      }
    }
  }
  .rating-wrapper {
    padding: 0 18px;
    .rating-item {
      display: flex; //头像固定，右侧自适应
      padding: 18px 0;
      @include border-1px(rgba(7, 17, 27, 0.1));
      .avatar {
        flex: 0 0 28px;
        vertical-align: top;
        margin-right: 12px;
        img {
          width: 28px;
          border-radius: 50%;
        }
      }
      .rating-content {
        position: relative;
        flex: 1;
        .name {
          margin-bottom: 4px;
          font-size: 10px;
          line-height: 12px;
          color: rgb(7, 17, 27);
        }
        .star-wrapper {
          margin-bottom: 6px;
          .star { //子组件的样式
            display: inline-block;
            vertical-align: top;
            margin-right: 6px;
          }
          .delivery {
            display: inline-block;
            vertical-align: top;
            font-size: 10px;
            line-height: 12px;
            color: rgb(147, 153, 159);
          }
        }
      }
      .text {
        margin-bottom: 8px;
        font-size: 12px;
        line-height: 18px;
        color: rgb(7, 17, 27);
      }
      .time {
        position: absolute;//时间位置固定
        top: 0;
        right: 0;
        line-height: 12px;
        font-size: 10px;
        color: rgb(147, 153, 159);
      }
      .recommend {
        line-height: 16px;
        font-size: 0;//span与span之间有间隙
        .icon-thumb_up {
          display: inline-block;
          margin-right: 8px;
          font-size: 9px;
          color: rgb(0, 160, 220);
        }
        .item {
          display: inline-block;
          padding: 0 6px;
          margin-right: 8px;
          border-radius: 1px;
          border:  1px solid rgba(7, 17, 27,0.1);
          background-color: rgb(255, 255, 255);
          font-size: 9px;
          color: rgb(147, 153, 159);
        }
      }
    }
    .no-ratings {
        padding: 16px 0;
        text-align: center;
        font-size: 12px;
        color: rgb(147, 153, 159)
    }
  }
}
</style>
